<template>
  <div class="digital-flop" :class="{ 'is-dark': isDark }">
    <div class="flop-container">
      <span
        v-for="(char, index) in displayValue"
        :key="`${index}-${char}`"
        class="digit-wrapper"
      >
        <span
          class="digit"
          :class="{ 
            'is-number': !isNaN(Number(char)),
            'is-rolling': isRolling 
          }"
          :style="{ 
            color: color,
            animationDelay: `${index * 50}ms`
          }"
        >
          <span class="digit-inner">{{ char }}</span>
          <!-- 数字背景光晕 -->
          <span class="digit-glow" v-if="isDark && !isNaN(Number(char))"></span>
        </span>
      </span>
    </div>
    
    <!-- 底部装饰线 -->
    <div class="flop-underline" v-if="isDark"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'

interface Props {
  value: number
  duration?: number
  decimals?: number
  separator?: string
  prefix?: string
  suffix?: string
  color?: string
}

const props = withDefaults(defineProps<Props>(), {
  duration: 1500,
  decimals: 0,
  separator: ',',
  prefix: '',
  suffix: ''
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const currentValue = ref(0)
const isRolling = ref(false)
const displayValue = computed(() => {
  const formatted = formatNumber(currentValue.value)
  return props.prefix + formatted + props.suffix
})

function formatNumber(num: number): string {
  const fixed = num.toFixed(props.decimals)
  const parts = fixed.split('.')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, props.separator)
  return parts.join('.')
}

function animateValue(target: number) {
  const start = currentValue.value
  const startTime = Date.now()
  isRolling.value = true
  
  const animate = () => {
    const now = Date.now()
    const progress = Math.min((now - startTime) / props.duration, 1)
    
    // 使用缓动函数
    const easeOutQuart = 1 - Math.pow(1 - progress, 4)
    currentValue.value = start + (target - start) * easeOutQuart
    
    if (progress < 1) {
      requestAnimationFrame(animate)
    } else {
      currentValue.value = target
      isRolling.value = false
    }
  }
  
  requestAnimationFrame(animate)
}

watch(() => props.value, (newVal) => {
  animateValue(newVal)
}, { immediate: true })
</script>

<style lang="scss" scoped>
.digital-flop {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  
  .flop-container {
    display: inline-flex;
    align-items: baseline;
    font-family: 'DS-Digital', 'Courier New', 'Consolas', monospace;
    font-weight: bold;
    letter-spacing: 3px;
    position: relative;
  }
  
  .digit-wrapper {
    display: inline-block;
    position: relative;
  }
  
  .digit {
    display: inline-block;
    position: relative;
    transition: all 0.3s;
    
    &.is-number {
      min-width: 0.7em;
      text-align: center;
      background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 50%,
        rgba(0, 0, 0, 0.1) 100%
      );
      border-radius: 4px;
      padding: 2px 4px;
      margin: 0 1px;
    }
    
    &.is-rolling {
      animation: digitRoll 0.3s ease-out;
    }
    
    .digit-inner {
      position: relative;
      z-index: 2;
    }
    
    .digit-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background: currentColor;
      opacity: 0.2;
      filter: blur(8px);
      border-radius: 50%;
      z-index: 1;
      animation: glowPulse 2s ease-in-out infinite;
    }
  }
  
  .flop-underline {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
      transparent, 
      currentColor, 
      transparent
    );
    margin-top: 4px;
    opacity: 0.5;
    animation: underlineScan 2s linear infinite;
  }
  
  &.is-dark {
    .digit.is-number {
      text-shadow: 
        0 0 10px currentColor, 
        0 0 20px currentColor,
        0 0 30px currentColor;
      background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(0, 0, 0, 0.3) 100%
      );
      box-shadow: 
        inset 0 0 10px rgba(255, 255, 255, 0.1),
        0 0 15px currentColor;
    }
  }
}

@keyframes digitRoll {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes underlineScan {
  0%, 100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
}
</style>
